<template>
<div  class="system_all_box" >
    <div class="system_box" v-for="(v,i) in this.$store.state.systemM.arrList" :key="i">
      <div class="system_box_img">
          <img :src="v.cover">
      </div>
      <div class="system_box_bottom">
          <p class="study_num"><span>{{v.stu_num}}</span>人学习-<span>{{888}}</span>人评价</p>
              <p class="pirse">{{"￥"+v.price}}<span class="discount_pirse">￥6600</span> </p>
          <span class="discount">优惠价</span>
      </div>
  </div>
</div>


    

  
</template>

<script>
export default {

}
</script>

<style scoped>
.system_all_box{
     width:100%;
     display: flex;
     flex-wrap: wrap;
}
.system_box{
    width: 1.69rem;
    height: 1.88rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: white;
    margin-bottom: 0.12rem;
    margin-right: 0.08rem;
    line-height: 0.14rem;
    margin-left: 0.08rem;
}
.system_box_img{
    width: 100%;
    height: 0.97rem;
}
.system_box_bottom{
   flex: 1;
}
img{
    width: 100%;
    height: 100%;
}
.discount{
    display: block;
    width: 0.39rem;
    height: 0.17rem;
    font-size: 0.1rem;
    border: 2px solid #a82c24;
    border-radius:0.03rem;
    text-align: center;
    color: #c72938;
     margin-left: 0.13rem;
}
.study_num{
    font-size: 0.1rem;
    color: #6a6a6a;
    margin-top: 0.1rem;
    margin-bottom: 0.14rem;
    margin-left: 0.13rem;
}
.pirse{
    color: #d01e3a;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0.12rem;
    margin-left: 0.13rem;
}
.discount_pirse{
   color: #b3b4b9;
   font-size: 8px;
   text-decoration-line: line-through;
}
</style>
